import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import LongPress from './directives/longpress'
// import track from './directives/track'
const app = createApp(App)

app.directive('drag', (el) => {
  const oDiv = el // 当前元素
  const minTop = oDiv.getAttribute('drag-min-top')
  const ifMoveSizeArea = 20
  oDiv.onmousedown = (e:MouseEvent) => {
    let target = oDiv
    while (window.getComputedStyle(target).position !== 'absolute' && target !== document.body) {
      target = target.parentElement
    }

    document.onselectstart = () => {
      return false
    }
    if (!target.getAttribute('init_x')) {
      target.setAttribute('init_x', target.offsetLeft)
      target.setAttribute('init_y', target.offsetTop)
    }

    const initX = parseInt(target.getAttribute('init_x'))
    const initY = parseInt(target.getAttribute('init_y'))

    // 鼠标按下，计算当前元素距离可视区的距离
    const disX = e.clientX - target.offsetLeft
    const disY = e.clientY - target.offsetTop
    document.onmousemove = e => {
      // 通过事件委托，计算移动的距离
      // 因为浏览器里并不能直接取到并且使用clientX、clientY,所以使用事件委托在内部做完赋值
      const l = e.clientX - disX
      const t = e.clientY - disY
      // 计算移动当前元素的位置，并且给该元素样式中的left和top值赋值
      target.style.left = l + 'px'
      target.style.top = (t < minTop ? minTop : t) + 'px'
      if (Math.abs(l - initX) > ifMoveSizeArea || Math.abs(t - initY) > ifMoveSizeArea) {
        target.setAttribute('dragged', '')
      } else {
        target.removeAttribute('dragged')
      }
    }
    document.onmouseup = e => {
      document.onmousemove = null
      document.onmouseup = null
      document.onselectstart = null
    }
    // return false不加的话可能导致黏连，拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
    return false
  }
})
app.directive('track', el=>{
  el.addEventListener('click',(e:MouseEvent)=>{
    console.log('go in handle')
    console.log('e',e)
  })

  // mounted(el, binding, vnode, prevVnode) {
  //   el._kpma_event = getEventHandle({
  //     el,
  //     binding,
  //     vnode,
  //     prevVnode,
  //     callBack: clickHandle,
  //   })
  //   console.log('go bind event')
  //   el.addEventListener('click', el._kpma_event)
  // },

  // unmounted(el) {
  //   console.log('go unbind event')
  //   el.removeEventListener('click', el._kpma_event)
  // },
})



// const getEventHandle = function (data:any) {
//   const fn = (e:any) => {
//     if (!e._kpma_vts) {
//       e._kpma_vts = Date.now()
//     } else if (e._kpma_vts <= fn.attached) {
//       return
//     }
//     e.stopPropagation()
//     e.preventDefault()
//     fn.callBack(e)
//   }
//   fn.attached = Date.now()
//   Object.assign(fn, data)
//   return fn
// }
// const clickHandle = function (e:any) {
//   e.preventDefault
//   console.log('go in handle')
//   const { el, binding, vnode, prevVnode } = this
//   console.log('event', e, e.clientX, e.clientY, binding.value.currentUrl)

//   let x = e.clientX
//   let y = e.clientY
//   let currentUrl = binding.value.currentUrl.split('/').pop()
//   let point = {
//     x,
//     y,
//     value: 1,
//   }
//   console.log('point', point)
// }
// 使用demo  v-track = "{triggerType:'click',currentUrl:$route.path,behavior:'点击xxx',businessCode:xx,actionType:'xx-click'}"









app.directive('longPress',LongPress)
app.use(ElementPlus).use(createPinia()).use(router).mount('#app')
